<template>
	<view class="detail">
		<view class="">
			<image src="https://z3.ax1x.com/2021/04/24/cjGHVe.png" mode="widthFix" class="topswiper"></image>
			<view class="message">
				<view class="price">
					<text class="newPrice">￥80</text>
					<text class="oldPrice">￥100</text>
				</view>
				<text class="deMsg">波奇网爱丽丝猫砂盆</text>
				<view class="xz">
					<image src="../../static/xz3.png" mode="widthFix"></image>
					<text>100%品牌保证</text>
					<image src="../../static/xz3.png" mode="widthFix"></image>
					<text>全国包邮</text>
				</view>
			</view>
		</view>
		<view class="detailAllTitle">商品详情</view>
		<image src="https://z3.ax1x.com/2021/04/24/cjGbUH.png" mode="widthFix" class="detailAll"></image>
		<view class="endBar">
			<image src="../../static/kf2.png" mode="heightFix"></image>
			<view>加入购物车</view>
			<view @click="goSettle">立即购买</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	created() {},
	methods:{
		goSettle(){
			uni.navigateTo({
				url:'../settle/settle'
			})
		}
	}
};
</script>

<style scoped>
view {
	background-color: #fff;
}
.detail{
	background-color: rgb(245, 244, 242);
	width: 100vw;
	/* height: 100; */
	padding-bottom: 98rpx;
	box-sizing: border-box;
	/* display: none; */
}
.topswiper {
	width: 100vw;
	background-color: #fff;
	position: relative;
}
.topswiper::after {
	content: '1/1';
	display: block;
	color: #ffffff;
	background-color: #000000;
	padding: 2rpx 15rpx;
	position: absolute;
	right: 5vw;
	top: 20rpx;
	font-size: 24rpx;
	opacity: 0.5;
	border-radius: 25rpx;
}
.endBar {
	width: 100vw;
	height: 98rpx;
	border-top: 2rpx solid #eeeeee;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.endBar image{
	height: 70%;
	margin: 0 80rpx;
}
.endBar view{
	height: 80%;
	width: 30vw;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.endBar view:nth-of-type(1){
	background-color: rgb(254, 170, 36);
	border-bottom-left-radius: 20rpx;
	border-top-left-radius: 20rpx;
}
.endBar view:nth-of-type(2){
	background-color: rgb(255, 121, 0);
	border-bottom-right-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.message{
	padding: 20rpx 40rpx;
	box-sizing: border-box;
}
.newPrice {
	color: rgb(255, 126, 10);
}
.oldPrice {
	color: #999999;
	font-size: 20rpx;
}
.deMsg{
	font-size: 24rpx;
}
.xz image{
	width: 40rpx;
	vertical-align: middle;
}
	.xz text{
		font-size: 24rpx;
	}
.xz text:nth-of-type(1){
 margin-right: 100rpx;
}
.detailAll{
	width: 100vw;
}
.detailAllTitle{
	text-align: center;
	background-color: #fff;
	color: #666666;
	margin-top: 10rpx;
}
</style>
